.bg {
  @apply fixed top-0 left-0 right-0 bottom-0;
  @apply bg-cover bg-center bg-no-repeat -m-4 bg-primary-default;

  filter: blur(20px);
}

.wrapper {
  @apply absolute flex justify-center flex-col items-center;

  top: 50%;
  left: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
}

.input-wrap {
  position: relative;
  overflow: hidden;
  margin: 2rem 0;
  & input {
    position: relative;
    -webkit-text-fill-color: #eee;
    color: #eee;

    @apply bg-white bg-opacity-5;

    border-radius: 6px;
    padding: 3px 12px;
    line-height: 1.8;
  }
  & .blur {
    mix-blend-mode: difference;
    position: absolute;
    top: -10px;
    bottom: -10px;
    right: -10px;
    left: -10px;
    background: #e6e6e686;
    filter: blur(10px);
    backdrop-filter: blur(10px) brightness(0.8);
    z-index: -1;
    transform: scale(1.5);
    border-radius: 6px;
  }
  & * {
    outline: none;
  }
}

form {
  @apply flex flex-col items-center justify-center;
}
